

<template>
  <div class="addUpdate">
   

   
    <div class="box3">
     <el-col :span="6">   <selectCommon   :thatF="this"></selectCommon></el-col>
       <el-col :span="12">     <el-date-picker
                        v-model="start"
                        type="date"
                        style="width: 160px"
                       
                        placeholder="开始时间"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                      
                      >
                      </el-date-picker>
                         <el-date-picker
                        v-model="end"
                        type="date"
                        style="width: 160px"
                       
                        placeholder="结束时间"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                      
                      >
                      </el-date-picker></el-col>
          
             <el-table   :data="cfListSub" style="width: 100%">
              <template v-for="(item, index) in tableTitle2">
                <el-table-column
                  :width="item.width"
                  v-if="item.prop == 'used_frqu'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                      <el-select
                        v-model="scope.row.used_frqu"
                        placeholder="频次"
                      >
                        <el-option
                          v-for="item in pinci"
                          :key="item.name"
                          :label="item.name"
                          :value="item.name"
                        >
                        </el-option>
                      </el-select>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  v-else-if="item.prop == 'dose'"
                  :width="item.width"

                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                      <el-input
                        v-model="scope.row.dose"
                        placeholder="剂量"
                      ></el-input>
                    </span>
                  </template>
                </el-table-column>
                <!-- <el-table-column
                  :width="item.width"
                  v-else-if="item.prop == 'usage'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                      <el-select v-model="scope.row.usage" placeholder="用法">
                        <el-option
                          v-for="item in thatF.geiyao"
                          :key="item.name"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </span>
                  </template>
                </el-table-column> -->

                  <el-table-column
                  v-else-if="item.prop == 'prd_days'"
                  :width="item.width"

                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                      <el-input
                        v-model="scope.row.prd_days"
                        placeholder="周期"
                      ></el-input>
                    </span>
                  </template>
                </el-table-column>




                <el-table-column
                  :width="item.width"
                  v-else-if="item.prop == 'begndate'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                    <el-date-picker
                        v-model="scope.row.begndate"
                        type="date"
                        style="width: 160px"
                        size="mini"
                        placeholder="选择日期"
                        format="yyyy-MM-dd "
                        value-format="yyyy-MM-dd "
                      
                      >
                      </el-date-picker>
                    </span>
                  </template>
                </el-table-column>
             <el-table-column
                  :width="item.width"
                  v-else-if="item.prop == 'enddate'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                    <el-date-picker
                        v-model="scope.row.enddate"
                        type="date"
                        style="width: 160px"
                        size="mini"
                        placeholder="选择日期"
                        format="yyyy-MM-dd "
                        value-format="yyyy-MM-dd "
                      
                      >
                      </el-date-picker>
                    </span>
                  </template>
                </el-table-column>
               

            

                <el-table-column
                  :width="item.width"
                  v-else
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                </el-table-column>
              </template>

              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, cfListSub)"
                    type="text"
                    size="small"
                  >
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

    
       
 
    </div>
    <div style="text-align: center">
      <!-- <el-button style="width: 200px;margin-right:50px;" class="butB_Add"  @click="save">哈哈哈哈哈</el-button> -->
      <el-button style="width: 200px" class="butB_Add"  @click="save">保存</el-button>
    </div>
  </div>
</template>
<script>
import ViewTitle from "@/forComponents/viewTitle/index.vue";
import selectCommon from './selectCommon.vue'

import { mapState, mapMutations, mapActions } from "vuex";
export default {
  props: ["id"],
  data() {
    return {

      cfListSub:[],
      zlListSub:[],
      start:'',
      end:'',
      tableData3: [],
      activeName: "one",

      selectData:{
          placeholder:'选择药品',
          data:[],

      },
      selectDataZl:{
           placeholder:'选择诊疗项目名称',
          data:[],
      },

     tableTitle2:[],


     tableTitle3: [ ],
     cf_remark:'',
     pinci:[],
     geiyao:[]
    };
  },
  mounted() {
  
    // if(thatF.chufangData2.drug){

    // }

    this.tableTitle2= this.$baseBai["workstation"]["right_three_table_title2"];
     this.tableTitle3= this.$baseBai["workstation"]["right_four_table_title"];
     this.getCommonGetPinci()  
     this.getDrug_channelGetList()
  },
     computed: {
    ...mapState({
      YZ_chufang_status: (state) => state.doctorWorkStation.YZ_chufang_status,
    }),
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },

    save() {
        var  data={
          id:this.id,
          end:this.end,
          start:this.start,
          drug:[],
        }
              this.cfListSub.forEach(res=>{

           data.drug.push({
             drug_id:res.id,
            
             dose:res.dose,
             dose_unit:res.dose_unit,
             each_dos:res.used_frqu,
           
            prd_days:res.prd_days,
            begndate:res.begndate,
            enddate:res.enddate
          });
        })
  
   

  
      this["_API"].uploadPsnSlowDiseaseTreatment(data).then((res) => {
        if (res.code == 200) {

          this.$message({
            message: res.message,
            type: "success",
          });
          //     this.thatF.tabName = "third";
          //     // this.thatF.handleClick();
          // this.thatF.updateChufangDialog = false;
          // this.thatF.getClinic_doctorGetRecipe(
          //   this.thatF.PatientInfoDatathird.patient_no
          // );
        }
      });
    },

     getDrugItem() {
      this.thatF.threeSelectLoading = true;
      this.thatF.selectParams.page=1;
      if(this.activeName=='one'){

         this.thatF.getDrugItem();
      }else if(this.activeName=='two'){

        this.thatF.getServiceItem()
      }

    },
      handlePagination(e) {
      this.thatF.threeSelectLoading = true;
      this.selectParams.page = e;
 if(this.activeName=='one'){

         this.thatF.getDrugItem();
      }else if(this.activeName=='two'){

        this.thatF.getServiceItem()
      }

    },
    getCommonGetPinci() {
      this["_API"].getCommonGetPinci().then((res) => {
        console.log(res.data);
        this.pinci = res.data;
      });
    },
    getDrug_channelGetList() {
      let t = this;

      t["_API"].getDrug_channelGetList().then((res) => {
        console.log(res);
        this.geiyao = res.data.list;
      });
    },
    xuanzeDataTwo(item){
    //     if( this.tableData3.findIndex(res=>res.id==item.id)===-1){
    //      this.tableData3 = this.tableData3.concat(item);
    //  }

    },
  },
  components: {
    ViewTitle,
    selectCommon,
  
    //  FormInfo
  },
};
</script>
<style lang='scss' scoped>
.addUpdate {
  padding: 0 5%;
  .box1 {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0;
    > div {
      position: relative;
      width: 33%;
      display: flex;
      align-items: center;
      // justify-content: center;
      margin-bottom: 20px;

      > span {
        display: inline-block;
        width: 65px;
      }
      /deep/ .el-input {
        width: 150px;
      }
    }
  }
  .box3 {
    margin: 20px 0;
  }

  .dukaBut {
    margin: 0px 0 20px;
  }
}
/deep/ .el-dialog__body {
  // height: 70vh;
  // overflow: scroll;
}
.selects{
      width: 300px;
    margin: 0px 0 20px;
}
</style>
